<template>
    <link type="text/css" rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/coupon.css">
    <div class="coupon_list">
      <li v-for="(item, index) in list" :key="index">
          <div class="coupon_item">
              <div class="item_content">
                  <router-link :to="{path: '/coupon/info', query: {cid: item.id}}">
                      <div class="left">
                          {{item.rate}}<span>折</span>
                      </div>
                      <div class="right">
                          <div>{{item.name}}</div>
                          <div>订单满<span> 100元 </span>打 <span>{{item.rate}} 折</span></div>
                          <div>每人限领1张</div>
                          <div>领取后10天内有效</div>
                      </div>
                  </router-link>
              </div>
              <div class="item_btn">
                <div v-if="item.status">
                  <router-link :to="{path: '/coupon/info', query: {cid: item.id}}">
                  <button class="right_btn1">立即使用</button>
                  </router-link>
                </div>
                <div v-else>
                  <router-link :to="{path: '/coupon/info', query: {cid: item.id}}">
                  <button class="apply_btn">已使用</button>
                  </router-link>
                </div>
              </div>
          </div>
      </li>
    </div>
</template>

<script setup>
import { onBeforeMount, reactive } from 'vue';

    const {proxy} = getCurrentInstance()

    let business = proxy.$business

    let list = reactive([])

    onBeforeMount(()=>{ CouponList() })

    const CouponList = async () => 
    {
        //发起请求
        var result = await proxy.$POST({
          url: '/coupon/list',
          params: { busid: proxy.$business.value.id }
        })


        //要么是出错 要么没有数据
        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }
        result.data.map((item)=>{
           list.push({
              id: item.cid,
              rate: item.coupon.rate * 100,
              name: item.coupon.title,
              status: item.status == '1' ? true : false,
           })
        })
    }
</script>